<template>
  <section class='f-shop'>
    <van-cell-group class="f-cell-group">
      <van-cell value="内容" is-link class="f-shop-name">
        <template #title>
          <section class="f-name-title">
            <img class="f-img1" src="@/assets/icons/jhh_store_icon.png" alt="">
            <p class="f-text1">{{shopForm.shopName}}</p>
          </section>
        </template>
        <template #value>
          <a @click="pageJump('update')">编辑</a>
        </template>
      </van-cell>
      <van-cell title="供应商代码" :value="shopForm.shopCode">
        <template #value>
          <section class="f-flex-right">
            <p class="f-mr-10">{{shopForm.shopCode || '--'}}</p>
            <van-button type="primary" round plain size="mini" @click="handleCopy(shopForm.shopCode)">
              &nbsp;&nbsp;复制&nbsp;&nbsp;
            </van-button>
          </section>
        </template>
      </van-cell>
      <van-cell title="二维码名片" is-link :value="shopForm.shopCode" @click="pageJump('cardQr',shopForm.shopCode)">
        <template #value>
          <qrcode-vue :value="shopForm.shopCode" :size="24" level="H" />
        </template>
      </van-cell>

      <van-cell title="店铺联系人" :value="shopForm.contactsName" />
      <van-cell title="联系电话" :value="shopForm.contactsPhone" />
      <van-cell v-if="shopForm.wechatQr" title="微信客服" is-link value="客服微信号" @click="pageJump('wechat')" />
    </van-cell-group>

    <van-cell-group class="f-cell-group f-mt-14">
      <van-cell title="店铺类型" :value="shopForm.shopType">
        <template #value>
          <p>{{shopForm.shopType == 1? '个人': '公司'}}</p>
        </template>
      </van-cell>
      <van-cell v-if="shopForm.shopType == 2" title="企业名称" :value="shopForm.companyName">
        <template #value>
          <p>{{shopForm.companyName || '--'}}</p>
        </template>
      </van-cell>
      <van-cell title="实名认证" is-link :value="shopForm.certificationStatus" @click="pageJump('realName')">
        <template #value>
          <p :style="{'color': shopForm.certificationStatus == 0? '#FC8683': '##3273F4'}">
            {{shopForm.certificationStatus == 0? '未实名': '已实名'}}
          </p>
        </template>
      </van-cell>
    </van-cell-group>

    <section class="f-mt-14 f-flex-between">
      <section class="f-img2 f-gys" @click="pageJump('supplier')">
        <div class="f-absolute">
          <p>
            <span class="f-text2">我的供应商</span>
            <span style="color:#fff">（{{shopForm.supplierCount || '0'}}）</span>
          </p>
          <p class="f-text3">查看/联系上游供应商</p>
        </div>
      </section>
      <section class="f-img2 f-fxs" @click="pageJump('distributor')">
        <div class="f-absolute">
          <p>
            <span class="f-text2">我的分销商</span>
            <span style="color:#fff">（{{shopForm.consumerCount || '0'}}）</span>
          </p>
          <p class="f-text3">查看分销商/分销商代注册</p>
        </div>
      </section>
    </section>

  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from "vuex";
import { getStore, successDeal } from '@/utils/utils';
import QrcodeVue from 'qrcode.vue'
import api from './api'

export default {
  components: { QrcodeVue },

  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      shopForm: {},
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '店铺管理',
        show: true,
        left: false,
        leftType: 'back',
        right: false,
        rightType: 'search',
      });

      getShopInfo()
    })

    const getShopInfo = () => {
      api.shopInfo().then(res => {
        state.shopForm = res.data
      })
    }

    function handleCopy(value) {
      const input = document.createElement('input');
      document.body.appendChild(input);
      input.setAttribute('value', value);
      input.select();
      if (document.execCommand('copy')) {
        document.execCommand('copy');
        successDeal('复制成功！')
      }
      document.body.removeChild(input);
    }

    const pageJump = (name) => {
      router.push({
        path: `/shop/${name}`
      })
    }

    return {
      ...toRefs(state),
      pageJump,
      handleCopy
    }
  }
}
</script>
<style lang='scss' scoped>
.f-shop {
  padding: 11px 16px;
  .f-cell-group {
    width: 344px;
    padding: 5px;
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(0, 51, 119, 0.1);
    border-radius: 10px;
    .f-shop-name {
      height: 70px;
      display: flex;
      align-items: center;
      .f-name-title {
        display: flex;
        align-items: center;
        position: absolute;
        top: 7px;
      }
    }
  }
  .f-img1 {
    width: 54px;
    height: 54px;
  }
  .f-text1 {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    margin-left: 8px;
  }
  .f-img2 {
    width: 159px;
    height: 102px;
    position: relative;
  }
  .f-fxs {
    background-image: url("@/assets/imgs/jhh_store_btn_fxs.png");
    background-size: 100%;
  }
  .f-gys {
    background-image: url("@/assets/imgs/jhh_store_btn_gys.png");
    background-size: 100%;
  }
  .f-absolute {
    position: absolute;
    top: 36px;
    left: 17px;
  }
  .f-text2 {
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
  }
  .f-text3 {
    font-size: 10px;
    color: #ffffff;
    margin-top: 9px;
  }
  .f-img3 {
    width: 344px;
    height: 73px;
    margin-top: 14px;
    margin-bottom: 10px;
    background-image: url("@/assets/imgs/jhh_store_btn_service.png");
    background-size: 100%;
  }

  .f-text4 {
    font-size: 16px;
    font-weight: 500;
    color: #000000;
    padding: 16px 18px;
  }

  .f-mt-14 {
    margin-top: 14px;
  }
}
</style>